<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>国庆节</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
</head>
<body>
    <div class="body">
        <li>
            <div class="body-font-left">
                <img src="image/logo.jpg" width="80" height="100">
                <img src="image/moon_play.png" width="40" height="40" class="icon-img">
            </div>
            <div class="body-font-right">
                <span class="body-font-text">《转折年代：中国的1947年》</span>
                <span class="body-font-author">作者：金冲及</span>
                <span class="body-font-important">人心向背，是最终能左右一切的决定性力量</span>
            </div>
        </li>
        <li>
            <div class="body-font-left">
                <img src="image/logo1.jpg" width="80" height="100">
                <img src="image/moon_play.png" width="40" height="40" class="icon-img">
            </div>
            <div class="body-font-right">
                <span class="body-font-text">《苍茫大地主沉浮》</span>
                <span class="body-font-author">作者：中共中央党史研究第一研究部</span>
                <span class="body-font-important">我们不但善于破坏一个旧世界，而且善于建设一个新世界</span>
            </div>
        </li>
        <li>
            <div class="body-font-left">
                <img src="image/logo1.jpg" width="80" height="100">
                <img src="image/moon_play.png"  width="40" height="40" class="icon-img">
            </div>
            <div class="body-font-right">
                <span class="body-font-text">《重读抗战家书》</span>
                <span class="body-font-author">作者：中共中央宣传部宣传教育局</span>
                <span class="body-font-important">聆听沙场绝笔，体会烽烟岁月。</span>
            </div>
        </li>
        <audio controls="" src="" id="ado" style="display: none;"></audio>
    </div>
    
</body>
</html>
<script>
var arr = [
    'video/axin.mp3',
    'video/demo.mp3',
    'video/zhe.mp3'
];
for(var i=0; i<$("li").length;i++){
    $("li").onclick=function(){
        $(".icon-img").attr("src","image/moon_play.png");
        for(var j=0;j<$("li").length;j++){
            if(this==$("li")){
                $("li")[i].className = 'sty';
                console.log($("li")[i].className);
                if($("#ado").attr("src") != arr[i]){
                    $("#ado").src=arr[i];
                }
                if($("#ado").paused){
                    $("#ado").play();
                    $(".icon-img").attr("str","image/moon_puse.png");
                }else{
                    $("#ado").pause();
                }
            }else{
                $("li")[i].className="";
            }
        }
    }
}
</script>